<template>
  <div class="ai-story-video-page">
    <div class="page-header">
      <h1 class="page-title">AI故事视频</h1>
      <p class="page-description">输入您的故事文案，AI将为您生成精彩的故事视频</p>
    </div>

    <div class="main-content">
      <!-- 左侧控制面板 -->
      <div class="control-panel">
        <!-- 故事文案输入 -->
        <div class="control-section">
          <h3 class="section-title">故事文案</h3>
          <div class="story-input-area">
            <textarea
              v-model="originalStory"
              :disabled="isProcessing"
              placeholder="请输入您的故事文案，例如：在一个遥远的王国里，有一位勇敢的公主，她踏上了拯救王国的冒险之旅..."
              class="story-textarea"
              rows="8"
            ></textarea>
            <div class="input-actions">
              <button 
                class="enhance-btn" 
                @click="enhanceStory" 
                :disabled="!originalStory.trim() || isEnhancing"
              >
                {{ isEnhancing ? '润色中...' : '🪄 AI润色扩充' }}
              </button>
              <span class="char-count">{{ originalStory.length }}/2000</span>
            </div>
          </div>
        </div>

        <!-- AI润色后的文案 -->
        <div class="control-section" v-if="enhancedStory">
          <h3 class="section-title">AI润色文案</h3>
          <div class="enhanced-story-area">
            <div class="enhanced-content">{{ enhancedStory }}</div>
            <div class="enhanced-actions">
              <button class="action-btn small" @click="useEnhanced">✅ 采用润色版本</button>
              <button class="action-btn small" @click="regenerateStory">🔄 重新润色</button>
            </div>
          </div>
        </div>

        <!-- 视频设置 -->
        <div class="control-section">
          <h3 class="section-title">视频设置</h3>
          <div class="settings-group">
            <!-- 视频风格 -->
            <div class="setting-item">
              <label class="setting-label">视频风格</label>
              <div class="style-grid">
                <button 
                  v-for="style in videoStyles" 
                  :key="style.id"
                  :class="['style-btn', { active: selectedStyle === style.id }]"
                  @click="selectStyle(style.id)"
                >
                  <span class="style-icon">{{ style.icon }}</span>
                  <span class="style-name">{{ style.name }}</span>
                </button>
              </div>
            </div>

            <!-- 视频时长 -->
            <div class="setting-item">
              <label class="setting-label">视频时长</label>
              <div class="duration-options">
                <button 
                  v-for="duration in durations" 
                  :key="duration.value"
                  :class="['duration-btn', { active: selectedDuration === duration.value }]"
                  @click="selectDuration(duration.value)"
                >
                  {{ duration.label }}
                </button>
              </div>
            </div>

            <!-- 分辨率 -->
            <div class="setting-item">
              <label class="setting-label">分辨率</label>
              <div class="resolution-options">
                <button 
                  v-for="res in resolutions" 
                  :key="res.value"
                  :class="['resolution-btn', { active: selectedResolution === res.value }]"
                  @click="selectResolution(res.value)"
                >
                  {{ res.label }}
                </button>
              </div>
            </div>

            <!-- LOGO设置 -->
            <div class="setting-item">
              <label class="setting-label">LOGO设置</label>
              <div class="logo-section">
                <div class="logo-upload" @click="triggerLogoUpload">
                  <input 
                    ref="logoInput" 
                    type="file" 
                    accept="image/*" 
                    @change="handleLogoUpload"
                    style="display: none"
                  />
                  <div v-if="!logoImage" class="logo-placeholder">
                    <div class="logo-icon">🏷️</div>
                    <p>点击上传LOGO</p>
                  </div>
                  <div v-else class="logo-preview">
                    <img :src="logoImage" alt="LOGO" class="logo-img" />
                    <button class="remove-logo-btn" @click.stop="removeLogo">❌</button>
                  </div>
                </div>
                <div class="logo-position">
                  <label class="logo-label">LOGO位置</label>
                  <select v-model="logoPosition" class="logo-select">
                    <option value="top-left">左上角</option>
                    <option value="top-right">右上角</option>
                    <option value="bottom-left">左下角</option>
                    <option value="bottom-right">右下角</option>
                  </select>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 生成控制 -->
        <div class="control-section">
          <div class="action-controls">
            <button 
              class="action-btn primary large" 
              @click="generateVideo" 
              :disabled="!finalStory.trim() || isProcessing"
            >
              {{ isProcessing ? '生成中...' : '🎬 生成故事视频' }}
            </button>
            <button class="action-btn" @click="clearAll" :disabled="isProcessing">
              🗑️ 清空重置
            </button>
            <button class="action-btn" @click="downloadVideo" :disabled="!generatedVideo">
              📥 下载视频
            </button>
          </div>
        </div>
      </div>

      <!-- 右侧预览区域 -->
      <div class="preview-area">
        <div class="result-container">
          <h3 class="result-title">视频预览</h3>
          
          <!-- 空状态 -->
          <div v-if="!isProcessing && !generatedVideo" class="empty-state">
            <div class="empty-icon">🎭</div>
            <p>输入故事文案，开始创作您的专属故事视频</p>
          </div>

          <!-- 生成中状态 -->
          <div v-if="isProcessing" class="generating-state">
            <div class="generating-animation">
              <div class="story-elements">
                <div class="element">📝</div>
                <div class="element">🎨</div>
                <div class="element">🎬</div>
                <div class="element">✨</div>
              </div>
            </div>
            <p class="generating-text">AI正在为您的故事创作视频...</p>
            <div class="progress-bar">
              <div class="progress-fill" :style="{ width: progress + '%' }"></div>
            </div>
            <span class="progress-text">{{ progress }}%</span>
            
            <!-- 生成步骤 -->
            <div class="generation-steps">
              <div :class="['step', { active: progress >= 20, completed: progress >= 40 }]">
                <span class="step-icon">📝</span>
                <span class="step-text">分析故事内容</span>
              </div>
              <div :class="['step', { active: progress >= 40, completed: progress >= 60 }]">
                <span class="step-icon">🎨</span>
                <span class="step-text">生成视觉场景</span>
              </div>
              <div :class="['step', { active: progress >= 60, completed: progress >= 80 }]">
                <span class="step-icon">🎵</span>
                <span class="step-text">配置音效音乐</span>
              </div>
              <div :class="['step', { active: progress >= 80, completed: progress >= 100 }]">
                <span class="step-icon">🎬</span>
                <span class="step-text">渲染最终视频</span>
              </div>
            </div>
          </div>

          <!-- 生成结果 -->
          <div v-if="generatedVideo" class="video-result">
            <div class="video-player">
              <div class="video-thumbnail">
                <img :src="generatedVideo.thumbnail" alt="视频缩略图" class="thumbnail-img" />
                <div class="play-overlay" @click="playVideo">
                  <div class="play-button">▶️</div>
                </div>
                <div class="video-info-overlay">
                  <span class="video-duration">{{ selectedDuration }}s</span>
                  <span class="video-resolution">{{ selectedResolution }}</span>
                </div>
              </div>
            </div>
            
            <!-- 视频信息 -->
            <div class="video-details">
              <h4 class="video-title">{{ generatedVideo.title }}</h4>
              <div class="video-meta">
                <span class="meta-item">
                  <span class="meta-label">风格:</span>
                  <span class="meta-value">{{ getStyleName(selectedStyle) }}</span>
                </span>
                <span class="meta-item">
                  <span class="meta-label">时长:</span>
                  <span class="meta-value">{{ selectedDuration }}秒</span>
                </span>
                <span class="meta-item">
                  <span class="meta-label">分辨率:</span>
                  <span class="meta-value">{{ selectedResolution }}</span>
                </span>
              </div>
              
              <!-- 操作按钮 -->
              <div class="video-actions">
                <button class="video-action-btn" @click="playVideo">
                  ▶️ 播放视频
                </button>
                <button class="video-action-btn" @click="regenerateVideo">
                  🔄 重新生成
                </button>
                <button class="video-action-btn" @click="shareVideo">
                  📤 分享视频
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'AiStoryVideo',
  data() {
    return {
      originalStory: '',
      enhancedStory: '',
      finalStory: '',
      logoImage: null,
      logoPosition: 'bottom-right',
      selectedStyle: 'cinematic',
      selectedDuration: 60,
      selectedResolution: '1080p',
      isEnhancing: false,
      isProcessing: false,
      progress: 0,
      generatedVideo: null,
      
      videoStyles: [
        { id: 'cinematic', name: '电影风格', icon: '🎬' },
        { id: 'cartoon', name: '卡通动画', icon: '🎨' },
        { id: 'realistic', name: '写实风格', icon: '📷' },
        { id: 'fantasy', name: '奇幻风格', icon: '🧙‍♂️' },
        { id: 'minimalist', name: '简约风格', icon: '⚪' },
        { id: 'vintage', name: '复古风格', icon: '📺' }
      ],
      
      durations: [
        { value: 30, label: '30秒' },
        { value: 60, label: '1分钟' },
        { value: 120, label: '2分钟' },
        { value: 300, label: '5分钟' }
      ],
      
      resolutions: [
        { value: '720p', label: '720p HD' },
        { value: '1080p', label: '1080p FHD' },
        { value: '4K', label: '4K UHD' }
      ]
    }
  },
  computed: {
    // 使用最终文案（润色版本或原始版本）
    finalStory() {
      return this.enhancedStory || this.originalStory;
    }
  },
  methods: {
    // AI润色故事
    async enhanceStory() {
      if (!this.originalStory.trim()) return;
      
      this.isEnhancing = true;
      
      // 模拟AI润色过程
      setTimeout(() => {
        this.enhancedStory = this.generateEnhancedStory();
        this.isEnhancing = false;
      }, 2000);
    },
    
    // 生成润色后的故事
    generateEnhancedStory() {
      const enhanced = `${this.originalStory}\n\n[AI润色扩充内容]\n在这个充满奇迹的故事中，每一个细节都闪闪发光。主人公的内心独白深深打动着观众，而背景音乐的缓缓响起更是为整个故事增添了浓厚的情感色彩。镜头在广阔的天空与细腻的表情之间自由切换，创造出令人难忘的视觉体验。`;
      return enhanced;
    },
    
    // 采用润色版本
    useEnhanced() {
      this.originalStory = this.enhancedStory;
      this.enhancedStory = '';
    },
    
    // 重新润色
    regenerateStory() {
      this.enhanceStory();
    },
    
    // 选择视频风格
    selectStyle(styleId) {
      this.selectedStyle = styleId;
    },
    
    // 选择时长
    selectDuration(duration) {
      this.selectedDuration = duration;
    },
    
    // 选择分辨率
    selectResolution(resolution) {
      this.selectedResolution = resolution;
    },
    
    // 上传LOGO
    triggerLogoUpload() {
      this.$refs.logoInput.click();
    },
    
    handleLogoUpload(event) {
      const file = event.target.files[0];
      if (file) {
        const reader = new FileReader();
        reader.onload = (e) => {
          this.logoImage = e.target.result;
        };
        reader.readAsDataURL(file);
      }
    },
    
    removeLogo() {
      this.logoImage = null;
      this.$refs.logoInput.value = '';
    },
    
    // 生成视频
    async generateVideo() {
      if (!this.finalStory.trim()) return;
      
      this.isProcessing = true;
      this.progress = 0;
      this.generatedVideo = null;
      
      // 模拟AI生成进度
      const progressInterval = setInterval(() => {
        this.progress += Math.random() * 5;
        if (this.progress >= 95) {
          this.progress = 95;
          clearInterval(progressInterval);
        }
      }, 200);
      
      // 模拟AI处理过程
      setTimeout(() => {
        clearInterval(progressInterval);
        this.progress = 100;
        
        this.generatedVideo = {
          id: Date.now(),
          title: '我的故事视频',
          thumbnail: 'https://via.placeholder.com/800x450/8B5CF6/FFFFFF?text=故事视频预览',
          duration: this.selectedDuration,
          resolution: this.selectedResolution,
          style: this.selectedStyle,
          url: 'mock_story_video.mp4'
        };
        
        this.isProcessing = false;
      }, 8000);
    },
    
    // 播放视频
    playVideo() {
      console.log('播放视频:', this.generatedVideo);
      // 这里可以集成真实的视频播放器
    },
    
    // 重新生成
    regenerateVideo() {
      this.generateVideo();
    },
    
    // 分享视频
    shareVideo() {
      console.log('分享视频:', this.generatedVideo);
    },
    
    // 下载视频
    downloadVideo() {
      if (this.generatedVideo) {
        console.log('下载视频:', this.generatedVideo);
        // 模拟下载
        const link = document.createElement('a');
        link.download = 'story_video.mp4';
        link.href = '#';
        link.click();
      }
    },
    
    // 清空所有
    clearAll() {
      this.originalStory = '';
      this.enhancedStory = '';
      this.logoImage = null;
      this.generatedVideo = null;
      this.progress = 0;
      this.$refs.logoInput.value = '';
    },
    
    // 获取风格名称
    getStyleName(styleId) {
      const style = this.videoStyles.find(s => s.id === styleId);
      return style ? style.name : '电影风格';
    }
  }
}
</script>

<style scoped>
.ai-story-video-page {
  padding: 1.5rem;
  min-height: 100vh;
  background: linear-gradient(135deg, #8B5CF6 0%, #EC4899 100%);
}

.page-header {
  text-align: center;
  margin-bottom: 2rem;
}

.page-title {
  font-size: 2.5rem;
  font-weight: bold;
  color: white;
  margin-bottom: 1rem;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.page-description {
  font-size: 1.1rem;
  color: rgba(255, 255, 255, 0.9);
  max-width: 600px;
  margin: 0 auto;
}

.main-content {
  display: flex;
  gap: 2rem;
  max-width: 1400px;
  margin: 0 auto;
}

.control-panel {
  width: 400px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border-radius: 16px;
  padding: 1.5rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  height: fit-content;
}

.control-section {
  margin-bottom: 2rem;
}

.section-title {
  font-size: 1.2rem;
  font-weight: 600;
  color: #2d3748;
  margin-bottom: 1rem;
}

.story-textarea {
  width: 100%;
  padding: 1rem;
  border: 2px solid #e2e8f0;
  border-radius: 12px;
  font-size: 0.95rem;
  line-height: 1.6;
  resize: vertical;
  transition: all 0.3s ease;
  background: white;
  font-family: inherit;
}

.story-textarea:focus {
  outline: none;
  border-color: #8B5CF6;
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1);
}

.input-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 0.75rem;
}

.enhance-btn {
  padding: 0.75rem 1.5rem;
  background: linear-gradient(135deg, #8B5CF6 0%, #7C3AED 100%);
  color: white;
  border: none;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.enhance-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(139, 92, 246, 0.4);
}

.enhance-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.char-count {
  font-size: 0.875rem;
  color: #718096;
}

.enhanced-story-area {
  border: 2px solid #D946EF;
  border-radius: 12px;
  padding: 1rem;
  background: linear-gradient(135deg, #FDF4FF 0%, #FAE8FF 100%);
}

.enhanced-content {
  font-size: 0.95rem;
  line-height: 1.6;
  color: #2d3748;
  margin-bottom: 1rem;
  white-space: pre-line;
}

.enhanced-actions {
  display: flex;
  gap: 0.75rem;
}

.settings-group {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.setting-item {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.setting-label {
  font-size: 0.9rem;
  font-weight: 500;
  color: #4a5568;
}

.style-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.5rem;
}

.style-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.75rem;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: white;
  cursor: pointer;
  transition: all 0.3s ease;
  gap: 0.25rem;
}

.style-btn:hover {
  border-color: #8B5CF6;
  background-color: #f8fafc;
}

.style-btn.active {
  border-color: #8B5CF6;
  background-color: #f3f4ff;
  color: #7C3AED;
}

.style-icon {
  font-size: 1.25rem;
}

.style-name {
  font-size: 0.8rem;
  font-weight: 500;
}

.duration-options, .resolution-options {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.5rem;
}

.duration-btn, .resolution-btn {
  padding: 0.75rem;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: white;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 0.875rem;
  font-weight: 500;
  text-align: center;
}

.duration-btn:hover, .resolution-btn:hover {
  border-color: #8B5CF6;
  background-color: #f8fafc;
}

.duration-btn.active, .resolution-btn.active {
  border-color: #8B5CF6;
  background-color: #f3f4ff;
  color: #7C3AED;
}

.logo-section {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.logo-upload {
  border: 2px dashed #D946EF;
  border-radius: 12px;
  padding: 1rem;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
  background: #FDF4FF;
  position: relative;
}

.logo-upload:hover {
  border-color: #C026D3;
  background-color: #FAE8FF;
}

.logo-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.logo-icon {
  font-size: 2rem;
}

.logo-preview {
  position: relative;
  display: inline-block;
}

.logo-img {
  max-width: 100px;
  max-height: 60px;
  border-radius: 6px;
}

.remove-logo-btn {
  position: absolute;
  top: -8px;
  right: -8px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: none;
  background: #e53e3e;
  color: white;
  font-size: 0.7rem;
  cursor: pointer;
}

.logo-position {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.logo-label {
  font-size: 0.875rem;
  font-weight: 500;
  color: #4a5568;
}

.logo-select {
  padding: 0.5rem;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  background: white;
  font-size: 0.875rem;
}

.action-controls {
  display: grid;
  gap: 0.75rem;
}

.action-btn {
  padding: 0.875rem 1rem;
  border: none;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.action-btn.primary {
  background: linear-gradient(135deg, #8B5CF6 0%, #EC4899 100%);
  color: white;
}

.action-btn.primary.large {
  padding: 1rem 1.5rem;
  font-size: 1.1rem;
}

.action-btn.primary:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(139, 92, 246, 0.4);
}

.action-btn:not(.primary) {
  background: rgba(255, 255, 255, 0.9);
  color: #4a5568;
  border: 1px solid #e2e8f0;
}

.action-btn.small {
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
}

.action-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.preview-area {
  flex: 1;
}

.result-container {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border-radius: 16px;
  padding: 2rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.result-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: #2d3748;
  margin-bottom: 1.5rem;
  text-align: center;
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 400px;
  color: #a0aec0;
}

.empty-icon {
  font-size: 4rem;
  margin-bottom: 1rem;
}

.generating-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 400px;
  gap: 1.5rem;
}

.generating-animation {
  display: flex;
  justify-content: center;
}

.story-elements {
  display: flex;
  gap: 1rem;
}

.element {
  font-size: 2.5rem;
  animation: float 2s ease-in-out infinite;
}

.element:nth-child(2) { animation-delay: 0.5s; }
.element:nth-child(3) { animation-delay: 1s; }
.element:nth-child(4) { animation-delay: 1.5s; }

@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
}

.generating-text {
  font-weight: 600;
  color: #2d3748;
}

.progress-bar {
  width: 350px;
  height: 8px;
  background: #e2e8f0;
  border-radius: 4px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #8B5CF6, #EC4899);
  transition: width 0.3s ease;
}

.progress-text {
  font-size: 0.9rem;
  font-weight: 600;
  color: #8B5CF6;
}

.generation-steps {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin-top: 1.5rem;
  width: 100%;
  max-width: 400px;
}

.step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem;
  border-radius: 8px;
  transition: all 0.3s ease;
  opacity: 0.3;
}

.step.active {
  opacity: 0.7;
  background: rgba(139, 92, 246, 0.1);
}

.step.completed {
  opacity: 1;
  background: rgba(139, 92, 246, 0.2);
}

.step-icon {
  font-size: 1.5rem;
}

.step-text {
  font-size: 0.8rem;
  text-align: center;
  font-weight: 500;
  color: #4a5568;
}

.video-result {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.video-player {
  width: 100%;
}

.video-thumbnail {
  position: relative;
  width: 100%;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}

.thumbnail-img {
  width: 100%;
  height: 300px;
  object-fit: cover;
  display: block;
}

.play-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
}

.play-overlay:hover {
  background: rgba(0, 0, 0, 0.5);
}

.play-button {
  font-size: 4rem;
  color: white;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
}

.video-info-overlay {
  position: absolute;
  top: 1rem;
  right: 1rem;
  display: flex;
  gap: 0.5rem;
}

.video-duration, .video-resolution {
  padding: 0.25rem 0.75rem;
  background: rgba(0, 0, 0, 0.7);
  color: white;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 500;
}

.video-details {
  background: white;
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.video-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: #2d3748;
  margin-bottom: 1rem;
}

.video-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.meta-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.meta-label {
  font-size: 0.875rem;
  color: #718096;
}

.meta-value {
  font-size: 0.875rem;
  font-weight: 600;
  color: #2d3748;
}

.video-actions {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.video-action-btn {
  padding: 0.75rem 1.5rem;
  border: 1px solid #8B5CF6;
  border-radius: 8px;
  background: white;
  color: #8B5CF6;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
}

.video-action-btn:hover {
  background: #8B5CF6;
  color: white;
  transform: translateY(-2px);
}

/* 响应式设计 */
@media (max-width: 1024px) {
  .main-content {
    flex-direction: column;
  }
  
  .control-panel {
    width: 100%;
  }
}

@media (max-width: 768px) {
  .page-title {
    font-size: 2rem;
  }
  
  .style-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  
  .generation-steps {
    grid-template-columns: 1fr;
  }
  
  .video-actions {
    flex-direction: column;
  }
}
</style> 
